<!-- home -->
<template>
  <page-view :full="true">
    <top-bar title="上传支付凭证"
             :white="true">
    </top-bar>
    <page-content>
      <div class="pf-header"></div>
      <div class="pf-radius">
        <div class="pf-box">
          <p class="pf-type">请选择支付方式</p>
          <van-radio-group v-model="radio"
                           direction="horizontal">
            <van-radio name="1">微信支付</van-radio>
            <van-radio name="2">银行卡支付</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="pf-text">
        <div class="pf-box">
          <div class="pf-span">
            <span class="pf-bx">*</span>
            <textarea class="pf-ta"
                      placeholder="请上微信支付订单截图或者银行卡转账账单"
                      v-model="desc"></textarea>
          </div>
          <van-uploader v-model="fileList"
                        :after-read="afterRead"
                        :before-delete="deleteFile"
                        max-count="1" />
        </div>

      </div>
      <div class="pf-btn">
        <van-button round
                    type="info"
                    class="mi-tx"
                    @click="submit">提交</van-button>
      </div>
    </page-content>
  </page-view>
</template>

<script>
import { Toast, Dialog } from 'vant';
import TopBar from '@/components/TopBar';
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
import service from '@/utils/request';

export default {
  components: {
    TopBar,
    PageView,
    PageContent
  },
  data () {
    return {
      radio: '1',
      desc: '',
      filePath: '',
      fileList: [],
      tempFileUrl: '',
      file: null
    }
  },
  mounted () {
    this.orderId = this.$route.params.orderId;
  },

  methods: {
    deleteFile (elIndex) {
      this.file = null;
      //lhy 新增
      let vm = this;
      return (file, name) => {
        let fileIndex = name.index
        vm.fileListIs[elIndex].splice(fileIndex, 1)
      }
    },
    afterRead (res) {
      this.file = res.file;
      this.fileList = [{
        url: res.content,
        isImage: true
      }]
      return res;
    },
    upload () {
      let formData = new FormData();
      // 向 formData 对象中添加文件
      formData.append('file', this.file);
      return service.post('/uploadFile.do', formData, {
        hideloading: true
      }).then(res => {
        this.filePath = res.data.src
      })
    },
    saveData () {
      return service.post('/apiOverPay.do', {
        order_no: this.orderId,
        pay_type: this.radio,
        payment_voucher: this.filePath
      }, {
        hideloading: true
      })
    },
    submit () {

      if (!this.file) {
        Dialog.alert({
          title: '提示',
          message: '请上传支付凭证信息！',
          confirmButtonColor: '#585DF9',
        })
        return;
      }
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '上传支付凭证',
      });

      this.upload().then(() => {
        toast.message = `提交凭证中`;
        return this.saveData();
      }).then(() => {
        setTimeout(() => {
          toast.clear()
          // 提交成功后 调用
          this.goBack(true);
        }, 1000);
      });
    },
    goBack (isPay = false) {
      this.$router.back({
        isPay
      })
      return false;
    },
  }
}
</script>
<style lang="scss">
.pf-header {
  height: 164px;
  background: #585df9;
  padding-top: 70px;
  box-sizing: border-box;
}
.pf-radius {
  margin-top: -59px;
  padding: 0 20px;
  .pf-box {
    height: 118px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    padding: 0 20px;
    .pf-type {
      font-size: 18px;
      font-weight: 500;
      color: #3d3e54;
      margin-top: 15px;
      margin-bottom: 23px;
    }
    .van-radio__label {
      font-size: 16px;
    }
  }
}
.pf-text {
  margin-top: 12px;
  padding: 0 20px;
  .pf-span {
    margin-bottom: 22px;
  }
  .pf-box {
    height: 300px;
    background: #ffffff;
    box-shadow: 0px 1px 0px 0px #f2f1f8, 0px 1px 0px 0px #f2f1f8;
    padding: 20px;
    .pf-ta {
      height: 73px;
      font-size: 13px;
      font-weight: 400;
      color: #7a7886;
      line-height: 18px;
      width: 90%;
      border: 0;
      display: inline-block;
      vertical-align: top;
    }
    .pf-bx {
      color: #de0000;
      display: inline-block;
      vertical-align: top;
    }
  }
}
.pf-btn {
  position: fixed;
  margin: 0 20px;
  bottom: 20px;
  text-align: center;
  .mi-tx {
    width: 335px;
    height: 57px;
    background: #585df9;
    border-radius: 29px;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
  }
}
</style>
